import Description from '@/components/Description';
import Tabs, { TabsProps } from '@/components/Tabs';
import React, { useMemo } from 'react';
import { useIntl, useSearchParams } from 'umi';
import DemandControl from './components/DemandControl';
import TimeSettings from './components/TimeSettings';
import styles from './index.less';

const BaseInfo: React.FC = () => {
  const [searchParams] = useSearchParams();
  const intl = useIntl();
  const items = [
    {
      key: 'area',
      label: intl.formatMessage({
        id: 'strategyAction.area',
      }),
      children: searchParams.get('areaName'),
    },
    {
      key: 'history',
      label: intl.formatMessage({
        id: 'strategyAction.management.history',
      }),
      children: searchParams.get('history'),
    },
    {
      key: 'stationName',
      label: intl.formatMessage({
        id: 'strategyControl.temporalStrategy.sendBy',
      }),
      children: searchParams.get('downUser'),
      span: 1,
    },
    {
      key: 'modifyTime',
      label: intl.formatMessage({
        id: 'strategyControl.temporalStrategy.sendStatus',
      }),
      children:
        searchParams.get('downStatus') === '1'
          ? intl.formatMessage({
              id: 'global.successful',
            })
          : intl.formatMessage({
              id: 'global.failed',
            }),
    },
    {
      key: 'createTime',
      label: intl.formatMessage({
        id: 'strategyControl.temporalStrategy.sendTime',
      }),
      children: searchParams.get('downTime'),
    },
  ];

  return <Description items={items} maxWidth={'100%'} />;
};

const Detail: React.FC = () => {
  const [searchParams] = useSearchParams();
  const intl = useIntl();

  // 解析 demandCtrl 参数
  const demandCtrlData = useMemo(() => {
    const reqParam = searchParams.get('reqParam');
    if (reqParam) {
      try {
        const parsedData = JSON.parse(decodeURIComponent(reqParam));
        return parsedData.demandCtrl; // 从 reqParam 中提取 demandCtrl 对象
      } catch (error) {
        console.error('解析策略参数失败:', error);
        return null;
      }
    }
    return null;
  }, [searchParams]);

  // 解析 timedStrategy 参数
  const timedStrategyData = useMemo(() => {
    const reqParam = searchParams.get('reqParam');
    if (reqParam) {
      try {
        const parsedData = JSON.parse(decodeURIComponent(reqParam));
        return parsedData.timedStrategy; // 从 reqParam 中提取 timedStrategy 对象
      } catch (error) {
        console.error('解析策略参数失败:', error);
        return null;
      }
    }
    return null;
  }, [searchParams]);

  const items: TabsProps['items'] = [
    {
      key: 'timeSettings',
      label: intl.formatMessage({
        id: 'strategyAction.settings.timePeriod',
      }),
      children: (
        <div className={`${styles.baseInfo} ${styles.strategyConfig}`}>
          <h3>
            {intl.formatMessage({
              id: 'strategyAction.settings.basicInfo',
            })}
          </h3>
          <BaseInfo />
          <div style={{ marginTop: 16 }}>
            <TimeSettings
              readOnly
              strategyData={{
                timedStrategy: timedStrategyData, // 传递解析后的 timedStrategy 数据
              }}
            />
          </div>
        </div>
      ),
    },
    {
      key: 'demandControl',
      label: intl.formatMessage({
        id: 'strategyAction.settings.demandControl',
      }),
      children: (
        <div className={styles.strategyConfig}>
          <DemandControl
            readOnly
            initialData={{
              enabled: demandCtrlData?.enabled ?? false,
              source: demandCtrlData?.source ?? 1,
              inputs: demandCtrlData?.inputs ?? Array(12).fill(0),
              demandPower: null, // 根据实际情况可能需要调整
              restrictType: demandCtrlData?.restrictType ?? 1,
              restrictedZone: demandCtrlData?.restrictedZone ?? 0,
            }}
          />
        </div>
      ),
    },
  ];

  return <Tabs items={items} />;
};

export default Detail;
